<template>
  <div>
	<van-sticky :offset-top="1">
		<header id="header" class="aui-bar aui-bar-nav">
			<a class="aui-pull-left" @click="fnStateList">
				<span class="iconfont icon-fanhui"></span>
			</a>
			<div class="aui-title">编辑买号</div>
		</header>
	</van-sticky>
    <div class="add_user aui-bg-f aui-padded-b-15" id="add_user">
        <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">平台</div>
                <div class="input aui-text-right aui-text-9 aui-ftn13" v-text="user.typename">
                </div>
            </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">买号登录用户名</div>
                <div class="input aui-text-right aui-text-9 aui-ftn13" v-text="user.username">
                </div>
            </div>
        </div>
        <!-- 淘宝 -->
        <div v-if="user.type == 1" v-cloak>
            <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
                <div class="content">
                    <div class="name aui-ftn14 aui-text-3 aui-font-weight">淘宝等级</div>
                    <div class="input aui-text-right" @click="level.show_lay = true">
                        <div class="aui-text-7 aui-ftn13" v-if="!level_img_">请选择</div>
                        <img :src="level_img_" alt=""  v-lazy="level_img_" v-else>
                    </div>
                </div>
            </div>
            <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
                <div class="content aui-padded-b-10">
                    <div class="name aui-ftn14 aui-text-3 aui-font-weight">等级截图</div>
                </div>
                <div class="cont_2">
                    <div class="img_desc">
                        <img :src="level_image" alt=""  @click="fnPreview(level_image)"  v-lazy="level_image"/>
                    </div>
                    <div class="img_cont aui-text-center" @click="image_type = 'level'">
                        <van-uploader :after-read="afterRead">
                          <div class="aui-ftn14 aui-text-7 aui-text-center" v-if="!user.level_image">上传</div>
                          <div class="img" :style="{backgroundImage:'url(' + user.level_image + ')'}" v-if="user.level_image"  v-lazy="user.level_image"></div>
                        </van-uploader>
                    </div>
                </div>
            </div>
        </div>

        <!-- 京东 -->
        <div v-if="user.type == 2" v-cloak>
            <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
                <div class="content">
                    <div class="name aui-ftn14 aui-text-3 aui-font-weight">京享值</div>
                    <div class="input">
                        <input type="text" name="username" v-model="user.value" placeholder="请填写" class="aui-text-right  aui-ftn13 aui-text-7">
                    </div>
                </div>
            </div>
            <div class="list aui-padded-t-10 aui-padded-b-10  van-hairline--bottom">
                <div class="content aui-padded-b-10">
                    <div class="name aui-ftn14 aui-text-3 aui-font-weight">等级截图</div>
                </div>
                <div class="cont_2">
                    <div class="img_desc" @click="fnPreview(jd_image)">
                        <img :src="jd_image" alt="" v-lazy="jd_image"/>
                    </div>
                    <div class="img_cont aui-text-center" @click="image_type = 'level'">
                        <van-uploader :after-read="afterRead">
                          <div class="aui-ftn14 aui-text-7 aui-text-center" v-if="!user.level_image">上传</div>
                          <div class="img" :style="{backgroundImage:'url(' + user.level_image + ')'}" v-if="user.level_image" v-lazy="user.level_image"></div>
                        </van-uploader>
                    </div>
                </div>
            </div>
        </div>


        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">收货城市</div>
                <div class="input" @click="city.is_show_address = true">
                    <div class="aui-text-7 aui-ftn13 aui-text-right" v-text="city.select_city"></div>
                </div>
            </div>
        </div>
        
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">性别</div>
                <van-radio-group v-model="user.gender" direction="horizontal" class="input gender aui-ftn13 aui-text-7">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
            </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">消费层级</div>
                <div class="input aui-text-right aui-ftn13 aui-text-7">
					<van-dropdown-menu>
					  <van-dropdown-item v-model="user.consume" :options="xf_level"/>
					</van-dropdown-menu>
                </div>
            </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
            <div class="content">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">人群标签</div>
                <div class="input aui-text-right">
                    <van-dropdown-menu>
                      <van-dropdown-item v-model="user.label" :options="group_tag"/>
                    </van-dropdown-menu>
                </div>
            </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
            <div class="content" @click="category.show_lay = true">
                <div class="name aui-ftn14 aui-text-3 aui-font-weight">常购类目</div>
                <div class="input">
                    <div class="aui-text-7 aui-ftn13 aui-text-right" v-text="category.select_categories"></div>
                </div>
            </div>
        </div>
        <div class="confirm_btn aui-text-f aui-bg-red aui-ftn16 aui-text-center" @click="fnEditUser">
            确认修改
        </div>
    </div>
    <!-- 收货城市 -->
    <van-popup v-model="city.is_show_address" position="bottom">
      <van-area title="所在地" :area-list="city.citys" item-height="60" @confirm="fnSelectCity" @cancel="city.is_show_address = false" />
    </van-popup>
    
    <!-- 常购类目 -->
    <van-overlay :show="category.show_lay">
      <div class="wrapper">
        <div class="user_category aui-bg-f">
            <div class="content">
              <van-row>
                <van-checkbox-group v-model="category.select_items" direction="horizontal" @change="fnConfirm">
                   <van-col span="12" v-for="(item, index) in category.items" :key="index" class="aui-padded-t-10 aui-padded-b-10">
                     <van-checkbox :name="item" shape="square">{{item.name}}</van-checkbox>
                   </van-col>
                 </van-checkbox-group>
              </van-row>
              <div class="aui-text-red aui-padded-t-15 aui-padded-b-15 aui-ftn14" v-if="category.select_items.length < 1">请选择1到5个常购类目！</div>
               <div class="aui-text-red aui-padded-t-15 aui-padded-b-15 aui-ftn14" v-if="category.select_items.length > 5">最多选择5项！</div>
            </div>
            <div class="close_btn aui-bg-red aui-text-center aui-ftn18 aui-text-f" @click="category.show_lay = false;">
                确定
            </div>
        </div>
      </div>
    </van-overlay>

    <!-- 淘宝等级 -->
    <van-overlay :show="level.show_lay">
      <div class="wrapper">
        <div class="add_level aui-bg-f">
            <div class="content" id="level">
                <div class="list" v-for="(item, index) in level.items" :key="index" @click="fnSelectLevel(index)">
                    <img :src="item" alt="">
                </div>
            </div>
            <div class="close_btn aui-bg-f aui-text-center aui-ftn16 aui-text-7" @click="level.show_lay = false">
                关闭
            </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import "@/styles/add_user.css"
  import province_list from '@/service/city.js'
  import User from '@/service/user.js'
  export default {
    data () {
      return {
        bindname: '',
        level_image: '',
        image_type: '',
        user: {
          gender: '1',
          type: 1,
          level_image: '',
          level: 0
        },
        level_img_: '',
        xf_level: [
            {
                value: 0,
                text: '请选择'
            },
            {
                value: 1,
                text: '10-50元'
            },
            {
                value: 2,
                text: '51-150元'
            },
            {
                value: 3,
                text: '151-250元'
            },
            {
                value: 4,
                text: '351-500元'
            },
            {
                value: 5,
                text: '500元以上'
            }
        ],
        group_tag: [
            {
                value: 0,
                text: '请选择'
            },
            {
                value: 1,
                text: '在校学生'
            },
            {
                value: 2,
                text: '职场白领'
            },
            {
                value: 3,
                text: '技术蓝领'
            },
            {
                value: 4,
                text: '家庭主妇'
            },
            {
                value: 5,
                text: '专职司机'
            },
            {
                value: 6,
                text: '公务员'
            },
            {
                value: 7,
                text: '医护人员'
            },
            {
                value: 8,
                text: '餐饮娱乐'
            },
            {
                value: 9,
                text: '自由职业'
            }
        ],
        jd_image: '',
        category: {
          select_items: [],
          items: [],
          category_items: '',
          select_categories: '',
          show_lay: false
        },
        city: {
          select_city: '请选择',
          is_show_address: false,
          citys: []
        },
        level: {
          show_lay: false,
          items: [
              require('../../../assets/tao_level1.png'),
              require('../../../assets/tao_level2.png'),
              require('../../../assets/tao_level3.png'),
              require('../../../assets/tao_level4.png'),
              require('../../../assets/tao_level5.png'),
              require('../../../assets/tao_level6.png'),
              require('../../../assets/tao_level7.png'),
              require('../../../assets/tao_level8.png'),
              require('../../../assets/tao_level9.png'),
              require('../../../assets/tao_level10.png'),
              require('../../../assets/tao_level11.png'),
              require('../../../assets/tao_level12.png'),
              require('../../../assets/tao_level13.png'),
              require('../../../assets/tao_level14.png'),
              require('../../../assets/tao_level15.png')
          ]
        }
      }
    },
    mounted() {
      this.bindname = this.utils.ossUrl + '/uploads/image/username.jpg';
      this.value_image = this.utils.ossUrl + '/uploads/image/value_image.jpg';
      this.level_image = this.utils.ossUrl + '/uploads/image/level_image.jpg';
      this.jd_image = this.utils.ossUrl + '/uploads/image/jd_level_image.jpg'
      this.city.citys = province_list;
      this.init()
    },
    methods: {
      init: function() {
          User.fnCheckEditAccount({id: this.$route.params.id, uid: this.$store.state.uid, isToken: true}).then(data => {
            if (data && data.status) {
                this.user = data.data;
				this.user.label = parseInt(this.user.label)
				this.user.consume = parseInt(this.user.consume)
                this.city.select_city = this.user.province + this.user.city + this.user.area
                if (this.user.level) this.level_img_ = require('../../../assets/tao_level'+this.user.level+'.png')
                this.fnGetTabData();
            } else {
				this.utils.fnOpenCommon(this, {name: 'account'})
			}
          })
      },
      // 类目
      fnConfirm: function() {
          if (this.category.select_items.length > 0 && this.category.select_items.length < 6) {
              var arr = [];
              var ids = [];
              this.category.select_items.forEach(function(item, index) {
                  ids.push(item.id)
              });
              this.category.select_items.forEach(function(item, index) {
                  arr.push(item.name)
              })
              this.category.select_categories = arr.join(',');
              this.user.category = ids;
          } else if (this.category.select_items.length == 0) {
			this.category.select_categories = '';
			this.user.category = [];
		  }
      },
      // 分类
      fnGetTabData: function() {
		 this.category.items = this.$store.state.category ?   this.$store.state.category : [];
		 if (this.category.items.length == 0) {
			 User.fnGetCate().then(res => {
			   if (res && res.status) {
			 	this.$store.commit('ADD_CATEGORY', res.data);
			    this.category.items = res.data
				this.fnEditItems()
			   }
			 })
		 } else {
			this.fnEditItems()
		 }
        
      },
	  fnEditItems: function() {
		 var categories = this.user.category.split(','), arr = [];
		 var vm = this;
		 this.category.items.forEach(function(item , index) {
		     categories.forEach(function (i) {
		        if(i == item.id) {
		             vm.category.select_items.push(item)
		             arr.push(item.name)
		        }
		     })
		 })
		 this.category.select_categories = arr.join(',') 
	  },
      fnChange: function() {
      },
      // 选择等级
      fnSelectLevel: function(index) {
         this.level_img_ = this.level.items[index];
         this.user.level = index + 1;
         this.level.show_lay = false;
      },
      // 请选择收货地址
      fnSelectCity: function(val) {
        var city = ''
        val.forEach((item)=>{
            city += item.name
        })
        this.city.select_city = city;
        this.city.is_show_address = false;
      },
      // 预览图片
      fnPreview: function(path) {
          this.utils.fnPreviewPic([path])
      },
	  afterRead(file) {
	      //判断图片的大小，单位是字节 
	      if (file.file.size > 3 * 1024 *1024) {
			  let vm = this;
			  this.utils.fnChangeFile(file, {w: 200, h : 300}, function(res) {
				  vm.fnUpload(res)
			  }) 
	      } else {
	          // 符合大小的，直接上传
	          this.fnUpload(file)
	      }
	  },
	  fnUpload: function(file) {
	    if (file) {
	      switch (this.image_type) {
	          case 'level':
	          this.user.level_image = file.content;
	          this.user.level_image_file = file.file;
	          break;
	      }
	    }
	  },
      // 提交资料
      fnEditUser: function() {
          if (this.fnToggle()) {
            let _param = {}, types = ['3','4','5','6']
            if (this.fnToggle()) {
              if (this.user.type == 1) {
                _param = {
                  id: this.$route.params.id,
                  uid: this.$store.state.uid,
                  gender: this.user.gender ? this.user.gender : 1,
                  type: this.user.type,
                  level: this.user.level,
                  level_image: this.user.level_image_file ? this.user.level_image_file : this.user.level_image,
                  province: this.user.province,
                  city: this.user.city,
                  area: this.user.area,
                  consume: this.user.consume,
                  label: this.user.label,
                  category: this.user.category
                }
              }
              if (this.user.type == 2) {
                _param = {
                  id: this.$route.params.id,
                  uid: this.$store.state.uid,
                  gender: this.user.gender ? this.user.gender : 1,
                  type: this.user.type,
                  level_image: this.user.level_image_file ? this.user.level_image_file : this.user.level_image,
                  value: this.user.value,
                  province: this.user.province,
                  city: this.user.city,
                  area: this.user.area,
                  consume: this.user.consume,
                  label: this.user.label,
                  category: this.user.category
                }
              }

              if (types.includes(this.user.type)) {
                _param = {
                  id: this.$route.params.id,
                  uid: this.$store.state.uid,
                  gender: this.user.gender ? this.user.gender : 1,
                  type: this.user.type,
                  province: this.user.province,
                  city: this.user.city,
                  area: this.user.area,
                  consume: this.user.consume,
                  label: this.user.label,
                  category: this.user.category
                }
              }
              let param = new FormData() // 创建form对象
              for (var i in _param) {
                param.append(i, _param[i]) // 添加form表单中其他数据
              }
              User.fnEditAccount(param).then(data => {
                if (data) {
                  this.utils.fnMsg(data.msg);
                  if (data.status) {
                    var vm = this;
                      setTimeout(function() {
                        vm.utils.fnOpenCommon(vm, {name: 'account', query:{title: '已添加', text: '添加买号'}})
                      }, 2000)
                  }
                }
              })
          }
        }
      },
      // 京东验证
      fnJdToggle: function() {
          var valueFormat = /^[0-9]*$/
          if (!vm.user.value) {
              this.utils.fnMsg('请填写京享值');
              return false;
          }  else if (!valueFormat.test(this.user.value)) {
              this.utils.fnMsg('京享值为数值！');
              return false;
          } else {
              return true;
          }
      },
      fnToggle: function() {
          var valueFormat = /^[0-9]*$/;
          if (this.$route.query.type == '2') {
              this.fnJdToggle()
          }
           if (!this.user.consume) {
              this.utils.fnMsg('请选择消费层级');
              return false;
          } else if (!this.user.label) {
              this.utils.fnMsg('请选择人群标签');
              return false;
          }  else if (this.user.category.length == 0) {
              this.utils.fnMsg('请至少选择一个常购类目');
              return false;
          } else {
              return true;
          }
      },
	  fnStateList () {
	  	this.utils.fnOpenCommon(this, {name: 'account'})
	  }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 30px;
    div.user_category {
      border-radius: 5px;
    }
    div.user_category div.content {
      border-radius: 5px;
      padding: 10px 25px;
    }
    div.user_category div.content div.item {
      padding-bottom: 20px;
    }
    div.user_category div.close_btn {
      height: 36px;
      line-height: 36px;
      border-radius: 0 0 5px 5px;
      border-top: 1px solid #eee;
    }
    div.add_level {
      position: absolute;
      top: 50%;
      right: 10%;
      left: 10%;
      margin: auto;
      border-radius: .375rem;
      -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
    }
    div.add_level div.content {
        border-radius: 5px 5px 0 0;
        padding: 5px 15px;
    }
    div.add_level div.content div.list {
        padding-bottom: 2px;
        img {
          height: 10px;
        }
    }
    div.add_level div.content div.list:nth-child(5n) {
        margin-bottom: 5px;
    }
    div.add_level div.close_btn {
        height: 36px;
        line-height: 36px;
        border-radius: 0 0 5px 5px;
        border-top: 1px solid #eee;
    }
  }
</style>
